<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="./code/lib/vue-2.4.0.js"></script>
</head>
<body>

    <div id="app">
        <input type="button" @click="getElement" ref="mybtn" value="获取元素" />
        <h1 class="h1" v-text="msg" ref="myh1"></h1>

        <hr />

        <login ref="mylogin"></login>
    </div>

    <template id="login">
        <div>
            <h1>登陆插件</h1>
        </div>
    </template>

    <script type="text/javascript">
    var login = {
        template: '#login',
        data(){
            return {
                sonmsg: '儿子'
            }
        }

    }

        // 创建 Vue实例，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '哈哈哈'
            },
            methods: {
                getElement(){
                    console.log(this.$refs.myh1.innerText);
                    console.log(this.$refs.mylogin.sonmsg);
                    // console.log(this.$refs);
                }
            },
            components: {
                login
            }
        });
    </script>
</body>
</html>